<template>
    <div class="movie-page flex flex-col">
        <titleBar>华夏影院</titleBar>
        <!-- 下面的类型列表 -->
        <ul class="type-tag">
            <li v-for="(item, index) in typeTagList" :key="index" @click="typeTagIndex = index"
                :class="[typeTagIndex == index ? 'active' : null]">
                <!-- 下面要遍历路由路径-->
               <router-link :to="{path:item.path}" class=" text-gray-700">{{ item.id }}</router-link>
               </li>
            <li class="right-search-icon">
                <img src="../assets/img/search.svg" alt="" @click="toSearchMovie" >
            </li>
        </ul>
        <!-- 下面的东西应该滚动，上面的不能滚动 -->
        <div >
            <router-view class=" flex-1 overflow-auto"></router-view>
        </div>
    </div>
</template>

<script setup>
import titleBar from "../components/title-bar.vue";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
let typeTagIndex = ref(0);
//获取路由管理对象
const router = useRouter();
// 点击搜索按钮跳转
const toSearchMovie=()=>{
       router.push({
        name:"SearchMovie"
       })
}

//在html里面使用ref的数据不需要.value,而在js代码里面使用ref的数据，要使用.value来获取或设置
const typeTagList = reactive([{
    id:'热映',
    path:'hotMovie'
}, {
    id:'影院',
    path:''
},{
    id:'待映',
    path:'willShowMovie'
},{
    id:'经典电影',
    path:'classicMovie'
}]);
</script>

<style lang="scss" scoped>
@import "../assets/scss/comm.scss";

.type-tag {
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    list-style-type: none;
    display: flex;
    border-bottom: 1px solid lightgray;
    height: 45px;

    li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px 8px;
        position: relative;

        &.active {
            font-size: 16px;
            color: #333333;

            &::after {
                //在选中的模块正下方添加内容
                content: "";
                position: absolute;
                width: 24px;
                height: 2px;
                bottom: 2px;
                background-color: $primaryColor;

            }
        }
    }

    position: relative;

    .right-search-icon {
        position: absolute;
        right: 0px;
        height: 100%;

        img {
            width: 20px;
            height: 20px;
        }
    }
}
</style>